<template>
  <div>
    <div class="banner">
      <el-carousel :interval="3000" type="card" height="600px">
        <el-carousel-item :key="index" v-for="(item,index) in list_img">
          <h3 class="medium"><img :src="item.picture" alt="" style="width:100%;height:600px" ></h3>
        </el-carousel-item>
      </el-carousel>
      <!-- <el-carousel height="600px" >
             <el-carousel-item :key="index" v-for="(item,index) in list_img">
                 <h3>
                     <img :src="item.picture" alt="" style="width:100%;height:600px" >
                 </h3>
             </el-carousel-item>
           </el-carousel> -->
    </div>
    <!-- 贫困户 -->
    <div class="mod-item">
      <div class="title">
        Recommond <br />
        贫困户推荐
      </div>
      <ul>
        <li :key="index" v-for="(item, index) in list_Pinkun">
          <img :src="item.cover" alt="" />
          <span>
            {{ item.name }}
          </span>
        </li>
      </ul>
      <div class="more" @click="$router.push('/pinkunView')">更多</div>
    </div>
    <!-- 扶贫 -->
    <div class="mod-item">
      <div class="title">
        Recommond <br />
        扶农政策推荐
      </div>
      <ul>
        <li :key="index" v-for="(item, index) in list_Alleviation">
          <img :src="item.cover" alt="" />
          <span>
            {{ item.title }}
          </span>
        </li>
      </ul>
      <div class="more" @click="$router.push('/alleviationView')">更多</div>
    </div>
    <!-- 志愿者 -->
    <div class="mod-item">
      <div class="title">
        Recommond <br />
        志愿者招聘推荐
      </div>
      <ul>
        <li :key="index" v-for="(item, index) in list_Volunteer">
          <img :src="item.picture" alt="" />
          <span>
            {{ item.total }}
          </span>
        </li>
      </ul>
      <div class="more" @click="$router.push('/volunteerView')">更多</div>
    </div>
    <!-- 用户 -->
    <div class="mod-item">
      <div class="title">
        Recommond <br />
        个人中心
      </div>
      <ul>
        <li :key="index" v-for="(item, index) in list_User">
          <img :src="item.photo" alt="" />
          <span>
            {{ item.name }}
          </span>
        </li>
      </ul>
      <div class="more" @click="$router.push('/userView')">更多</div>
    </div>
    <!-- 收藏 -->
    <div class="mod-item">
      <div class="title">
        Recommond <br />
        收藏推荐
      </div>
      <ul>
        <li :key="index" v-for="(item, index) in list_Collection">
          <img :src="item.picture" alt="" />
          <span>
            {{ item.name }}
          </span>
        </li>
      </ul>
      <div class="more" @click="$router.push('/collectionView')">更多</div>
    </div>
    <!-- 留言板 -->
    <div class="mod-item">
      <div class="title">
        Recommond <br />
        留言板推荐
      </div>
      <ul>
        <li :key="index" v-for="(item, index) in list_Msgboard">
          <img :src="item.picture" alt="" />
          <span>
            {{ item.username }}
          </span>
        </li>
      </ul>
      <div class="more" @click="$router.push('/msgboardView')">更多</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list_img: [],
      list_Pinkun: [],
      list_Alleviation: [],
      list_Volunteer: [],
      list_User: [],
      list_Collection: [],
      list_Msgboard: [],
    };
  },
  methods: {
    async getBanner() {
      let { data: res } = await this.$axios.get("/carousel/getlist");
      // window.console.log(res)
      this.list_img = res.data.list;
    },
    async getPinkun() {
      let { data: res } = await this.$axios.get(
        "/poor/getlist?pageNum=1&pageSize=2"
      );
      this.list_Pinkun = res.data.list;
    },
    async getAlleviation() {
      let { data: res } = await this.$axios.get(
        "/alleviation/getlist?pageNum=1&pageSize=2"
      );
      this.list_Alleviation = res.data.list;
    },
    async getVolunteer() {
      let { data: res } = await this.$axios.get(
        "/volunteer/getlist?pageNum=1&pageSize=2"
      );
      this.list_Volunteer = res.data.list;
    },
    async getUser() {
      let { data: res } = await this.$axios.get(
        "/user/getlist?pageNum=1&pageSize=2"
      );
      this.list_User = res.data.list;
    },
    async getCollection() {
      let { data: res } = await this.$axios.get(
        "/collection/getlist?pageNum=1&pageSize=2"
      );
      this.list_Collection = res.data.list;
    },
    async getMsgboard() {
      let { data: res } = await this.$axios.get(
        "/msgboard/getlist?pageNum=1&pageSize=2"
      );
      this.list_Msgboard = res.data.list;
    },
  },
  created() {
    this.getBanner();
    this.getPinkun();
    this.getAlleviation();
    this.getVolunteer();
    this.getUser();
    this.getCollection();
    this.getMsgboard();
  },
};
</script>

<style lang="scss" scoped>
.mod-item {
  width: 80%;
  margin: 0 auto;
  .title {
    font-size: 25px;
    text-align: center;
  }
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 46%;
      height: 130px;
      border: 1px #999 solid;
      margin: 3px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      box-shadow: 10px 10px 5px #ccc;
      img {
        width: 125px;
        height: 125px;
        border-radius: 50%;
      }
      span {
        display: inline-block;
        margin: 0 auto;
      }
    }
  }
  .more {
    width: 100px;
    height: 30px;
    // border: 1px skyblue solid;
    cursor: pointer;
    margin: 10px auto;
    line-height: 30px;
    text-align: center;
    border-radius: 20px;
    background: linear-gradient(to bottom, #5ab5e3 20%, #0b79f8 50%);
  }
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>